<template>
  <div class="component need-footer">
    <app-header title="列表滑动加载" :needBack="true"></app-header>
    <ul class="box-list" ref="list">
      <li class="box" v-for="(item, index) in list" :key="index">{{item}}</li>
    </ul>
    <p class="loading-row">
      <span v-if="tipsState === 1"><inline-loading></inline-loading>加载中</span>
      <span v-if="tipsState === 2">最后一页了</span>
    </p>
    <app-footer :active="5"></app-footer>
  </div>
</template>
<script>
  import hammerjs from 'hammerjs'
  import AppHeader from '@/components/common/AppHeader'
  import AppFooter from '@/components/common/AppFooter'
  import { InlineLoading } from 'vux'

  let current = 1
  const pagesize = 10
  const total = 45

  export default {
    data () {
      return {
        list: [],
        current: 1,
        total: 0,
        tipsState: 1,
        loading: false
      }
    },
    methods: {
      getList (page) {
        if (this.loading) return
        this.loading = true
        this.total = total

        if (page > Math.ceil(total / pagesize)) {
          this.tipsState = 2
          return
        } else {
          this.tipsState = 1
        }
        const list = []
        for (let i = 0; i < pagesize; i++) {
          if ((page - 1) * pagesize + i < total) {
            list.push((page - 1) * pagesize + i)
          }
        }
        setTimeout(() => {
          current = page
          this.list = this.list.concat(list)
          this.loading = false
        }, 2000)
      }
    },
    mounted() {
      window.addEventListener('scroll', () => {
        if (document.body.scrollTop + window.innerHeight >= document.body.offsetHeight) {
          this.getList(current + 1)
        }
      })
      var hammertime = new Hammer(this.$refs.list);
      hammertime.on('pan', function(ev) {
        console.log(ev);
        console.log(ev.distance + window.innerHeight >= document.body.offsetHeight)
      })

      this.getList(1)
    },
    components: {
      AppHeader,
      AppFooter,
      InlineLoading
    }
  }
</script>
<style lang="less" scoped>
  .box-list {
    width: 90%;
    margin: auto;
    .box {
      width: 100%;
      height: 2rem;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: .8rem;
      &:nth-child(10n+1) {
        background: #233142;
      }
      &:nth-child(10n+2) {
        background: #455d7a;
      }
      &:nth-child(10n+3) {
        background: #f95959;
      }
      &:nth-child(10n+4) {
        background: #facf5a;
      }
      &:nth-child(10n+5) {
        background: #d1478c;
      }
      &:nth-child(10n+6) {
        background: #ff7a5c;
      }
      &:nth-child(10n+7) {
        background: #7971ea;
      }
      &:nth-child(10n+8) {
        background: #ff3434;
      }
      &:nth-child(10n+9) {
        background: #53d397;
      }
      &:nth-child(10n) {
        background: #edf0c7;
      }
    }
  }
  .loading-row {
    line-height: .6rem;
    font-size: .25rem;
    color: #666;
    text-align: center;
  }
</style>
